<template>
    <div class="child">
        <h2> 子组件 曹植</h2>
        <h3> 收到父亲-曹操的消息：{{ fromCaocaoMsg }}</h3>
        <el-button @click="sendToFather">给父亲回话</el-button>
    </div>
</template>

<script lang="ts" setup>
import { inject, type Ref } from 'vue'

// 注入来自曹操的数据
const fromCaocaoMsg = inject<Ref<string>>('family-message')
const updateGrandpaMessage = inject<(msg: string) => void>('update-grandpa-message');

const sendToFather = () => {
    if (updateGrandpaMessage) {
        updateGrandpaMessage('父亲，孩儿也一切安好。');
    }
}
</script>

<style scoped>
.child {
    display: grid;
    justify-content: center;
    align-items: center;
    background-color: rgb(237, 225, 195);
    height: 400px;
    padding: 20px;
}
</style>